<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/default}">
<head>
    <title th:text="${itemId != null ? '编辑信息' : '发布新信息'}">发布/编辑信息</title>
</head>
<body>
    <div layout:fragment="content" class="fade-in">
        <div class="mb-3">
            <a href="/items" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left"></i> 返回列表
            </a>
        </div>
    
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-edit me-2"></i>
                    <span th:text="${itemId != null ? '编辑信息' : '发布新信息'}">发布/编辑信息</span>
                </h5>
            </div>
            <div class="card-body">
                <form id="item-form" th:action="${itemId != null ? '/items/' + itemId : '/items'}" method="post" enctype="multipart/form-data" class="row g-3 needs-validation" novalidate>
                    <div class="col-12 mb-3">
                        <div class="p-3 rounded" style="background: rgba(52, 152, 219, 0.05);">
                            <p class="mb-1"><i class="fas fa-info-circle me-2"></i>请填写以下信息:</p>
                            <small class="text-muted">带 <span class="text-danger">*</span> 的字段为必填项</small>
                        </div>
                    </div>
                    
                    <!-- 状态选择 -->
                    <div class="col-md-6">
                        <label for="status" class="form-label">信息类型 <span class="text-danger">*</span></label>
                        <select id="status" name="status" class="form-select" required>
                            <option value="">请选择信息类型</option>
                            <option th:each="status : ${itemStatuses}" th:value="${status}" 
                                    th:text="${status.displayName}" th:selected="${item.status == status}"></option>
                        </select>
                        <div class="invalid-feedback">请选择信息类型</div>
                        <div class="form-text">请选择发布失物还是招领信息</div>
                    </div>

                    <!-- 物品类型选择 -->
                    <div class="col-md-6">
                        <label for="type" class="form-label">物品类型 <span class="text-danger">*</span></label>
                        <select id="type" name="type" class="form-select" required>
                            <option value="">请选择物品类型</option>
                            <option th:each="type : ${itemTypes}" th:value="${type}" 
                                    th:text="${type.displayName}" th:selected="${item.type == type}"></option>
                        </select>
                        <div class="invalid-feedback">请选择物品类型</div>
                        <div class="form-text">请选择物品所属的类别</div>
                    </div>

                    <!-- 标题 -->
                    <div class="col-12">
                        <label for="title" class="form-label">标题 <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="title" name="title" 
                               th:value="${item.title}" placeholder="简短描述物品" required
                               minlength="2" maxlength="50">
                        <div class="invalid-feedback">请输入标题(2-50个字符)</div>
                    </div>

                    <!-- 描述 -->
                    <div class="col-12">
                        <label for="description" class="form-label">详细描述</label>
                        <textarea class="form-control" id="description" name="description" 
                                  rows="4" placeholder="详细描述物品特征、丢失/拾获地点等信息" th:text="${item.description}"
                                  maxlength="1000"></textarea>
                        <div class="form-text">
                            <span id="description-count">0</span>/1000字
                        </div>
                    </div>
                    
                    <!-- 丢失/拾获时间 -->
                    <div class="col-12">
                        <label for="lostTime" class="form-label">丢失/拾获时间</label>
                        <input type="datetime-local" class="form-control" id="lostTime" name="lostTime" 
                               th:value="${item.lostTime != null && #temporals != null ? #temporals.format(item.lostTime, 'yyyy-MM-dd''T''HH:mm') : ''}"
                               placeholder="选择物品丢失或拾获的时间">
                        <div class="form-text">请选择物品丢失或拾获的大致时间</div>
                        
                        <!-- 调试信息 -->
                        <div class="mt-2 small text-muted">
                            <span>当前时间值: </span>
                            <span th:text="${item.lostTime != null ? item.lostTime : '未设置'}"></span>
                        </div>
                    </div>

                    <!-- 联系方式 -->
                    <div class="col-12">
                        <label for="contactInfo" class="form-label">联系方式 <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="contactInfo" name="contactInfo" 
                               th:value="${item.contactInfo}" placeholder="请提供您的联系方式（手机号、微信、邮箱等）" required
                               minlength="5" maxlength="50">
                        <div class="invalid-feedback">请输入有效的联系方式</div>
                    </div>

                    <!-- 图片上传 -->
                    <div class="col-12">
                        <label for="image" class="form-label">上传图片</label>
                        <div class="input-group">
                            <input class="form-control" type="file" id="image" name="image" accept="image/*">
                            <button class="btn btn-outline-secondary" type="button" id="clear-file">
                                <i class="fas fa-times"></i> 清除
                            </button>
                        </div>
                        <div class="form-text">可选，上传物品照片（支持JPG、PNG格式，最大10MB）</div>
                        
                        <!-- 图片预览 -->
                        <div id="image-preview-container" class="mt-3 d-none">
                            <p class="mb-2"><i class="fas fa-image me-2"></i>图片预览:</p>
                            <div class="p-2 border rounded">
                                <img id="image-preview" src="#" alt="图片预览" style="max-height: 200px; max-width: 100%;" class="img-thumbnail">
                            </div>
                        </div>
                        
                        <!-- 显示已有图片 -->
                        <div class="mt-3" th:if="${existingImagePath != null}">
                            <p class="mb-2"><i class="fas fa-image me-2"></i>当前图片:</p>
                            <div class="p-2 border rounded">
                                <img th:src="${existingImagePath}" alt="当前图片" style="max-height: 200px; max-width: 100%;" class="img-thumbnail">
                                <div class="form-text mt-2">如上传新图片将替换当前图片</div>
                            </div>
                        </div>
                    </div>

                    <!-- 提交按钮 -->
                    <div class="col-12 text-end mt-4">
                        <a href="/items" class="btn btn-secondary">
                            <i class="fas fa-times"></i> 取消
                        </a>
                        <button type="submit" class="btn btn-primary" id="submit-btn">
                            <i class="fas fa-save"></i> 保存
                            <span class="spinner-border spinner-border-sm d-none" id="submit-spinner"></span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <script th:inline="javascript">
        document.addEventListener('DOMContentLoaded', function() {
            // 表单验证
            const form = document.getElementById('item-form');
            const submitBtn = document.getElementById('submit-btn');
            const spinner = document.getElementById('submit-spinner');
            
            form.addEventListener('submit', function(event) {
                if (!form.checkValidity()) {
                    event.preventDefault();
                    event.stopPropagation();
                    
                    // 滚动到第一个错误字段
                    const firstInvalid = form.querySelector(':invalid');
                    if (firstInvalid) {
                        firstInvalid.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    }
                } else {
                    // 显示加载状态
                    submitBtn.disabled = true;
                    spinner.classList.remove('d-none');
                }
                
                form.classList.add('was-validated');
            });
            
            // 字数统计
            const description = document.getElementById('description');
            const charCount = document.getElementById('description-count');
            
            function updateCharCount() {
                const count = description.value.length;
                charCount.textContent = count;
                
                if (count > 900) {
                    charCount.classList.add('text-danger');
                } else {
                    charCount.classList.remove('text-danger');
                }
            }
            
            description.addEventListener('input', updateCharCount);
            updateCharCount(); // 初始化
            
            // 图片预览
            const imageInput = document.getElementById('image');
            const previewContainer = document.getElementById('image-preview-container');
            const preview = document.getElementById('image-preview');
            const clearBtn = document.getElementById('clear-file');
            
            imageInput.addEventListener('change', function() {
                if (this.files && this.files[0]) {
                    const reader = new FileReader();
                    
                    reader.onload = function(e) {
                        preview.src = e.target.result;
                        previewContainer.classList.remove('d-none');
                    };
                    
                    reader.readAsDataURL(this.files[0]);
                } else {
                    previewContainer.classList.add('d-none');
                }
            });
            
            clearBtn.addEventListener('click', function() {
                imageInput.value = '';
                previewContainer.classList.add('d-none');
            });
        });
    </script>
</body>
</html> 